import { FC, useEffect } from "react";
import { IconFont } from "../../../utils/iconfont/icon";
import styles from "./login.module.css";
import { useDispatch } from "react-redux";
// import { Input } from "antd";
// import { SearchOutlined } from "@ant-design/icons";
import Header from "../../../components/Header";
import phone from "../../../assest/login.png";
import {
  userSlice,
  signIn,
  getQcode as getQcodes,
  check,
  register,
} from "../../../redux/login/slice";
import { useSelector } from "../../../redux/hooks";
import { Checkbox } from "antd";
import { useHistory } from "react-router";
import { Statistic } from "antd";

const Login: FC = () => {
  const { Countdown } = Statistic;
  const deadline = Date.now() + 1000 * 60 + 1000; // Moment is also OK
  function onFinish() {
    console.log("finished!");
    dispatch(userSlice.actions.canGetQcode(true));
  }
  //   const timeCountDown = (val) => {
  //     if (4.95 * 1000 < val && val < 5 * 1000) {
  //       console.log("changed!");
  //     }
  //   };
  const {
    time,
    exist,
    canGetQcode,
    registerName,
    qcode,
    phoneNumber,
    psd,
    data,
  } = useSelector((s) => s.user);
  const dispatch = useDispatch();
  const history = useHistory();
  //   const goLogin = () => {};
  const { type } = useSelector((s) => s.user);
  const onChange = (e) => {
    console.log(`checked = ${e.target.checked}`);
  };

  //   const onChange = () => {
  //     console.log("22");
  //   };
  const login = () => {
    dispatch(signIn({ phone: phoneNumber, password: psd }));
    history.goBack();
  };
  const registerOK = () => {
    dispatch(
      register({
        phone: phoneNumber,
        password: psd,
        captcha: qcode,
        nickname: registerName,
      })
    );
    dispatch(userSlice.actions.changeType("login"));
  };
  const getQcode = () => {
    dispatch(userSlice.actions.getTimeCountDown(Date.now() + 1000 * 60 + 1000));
    dispatch(userSlice.actions.canGetQcode(false));
    // dispatch(getQcodes({ phone: phoneNumber }));
    // dispatch(check({ phone: phoneNumber })); 验证手机号是否重复
  };
  useEffect(() => {
    dispatch(
      userSlice.actions.init({
        canGetQcode: true,
        exist: -1,
        phoneNumber: "",
        qcode: "",
        type: "login",
        psd: "",
      })
    );
  }, []);

  return (
    <div>
      {" "}
      <Header />
      <div className={styles.loginMain}>
        <div className={styles.loginBox}>
          {/* <Button onClick={error}>Error</Button> */}
          {type === "registered" ? (
            <div
              className={styles.gobackLogin}
              onClick={() => {
                dispatch(userSlice.actions.changeType("login"));
              }}
            >
              返回登录
            </div>
          ) : null}
          <div className={styles.imgBox}>
            <img src={phone} alt="" />
          </div>
          <div className={styles.inputBox}>
            <div className={styles.inputBoxBorder}>
              <div className={styles.inputTop}>
                <div className={styles.inputTopRight}>
                  <IconFont type="icon-shouji" />
                  <span> + 86</span>
                </div>{" "}
                <input
                  value={phoneNumber}
                  className={styles.phoneInput}
                  type="text"
                  placeholder="请输入手机号"
                  onChange={(e) => {
                    dispatch(userSlice.actions.changePhone(e.target.value));
                  }}
                />
              </div>
              {type === "login" ? null : (
                <>
                  {" "}
                  <div className={styles.inputMid}>
                    {/* <div className={styles.inputTopRight}>
                  <IconFont type="icon-shouji" />
                  <span> + 86</span>
                </div>{" "} */}

                    <input
                      value={qcode}
                      className={styles.phoneInput}
                      type="text"
                      placeholder="请输入验证码"
                      onChange={(e) => {
                        dispatch(userSlice.actions.changeQcode(e.target.value));
                      }}
                    />
                    <div onClick={getQcode} className={styles.getQcode}>
                      {/* 获取验证码{" "} */}
                      {canGetQcode ? (
                        <> 获取验证码 </>
                      ) : (
                        <>
                          <div className={styles.Countdown}>
                            {" "}
                            <Countdown
                              value={time}
                              onFinish={onFinish}
                              format="ss"
                            />
                          </div>
                        </>
                      )}
                    </div>

                    {/* <Countdown value={deadline} onFinish={onFinish} format="ss" /> */}
                  </div>
                  <div className={styles.inputTop}>
                    {/* <div className={styles.inputTopRight}>
                  <IconFont type="icon-shouji" />
                  <span> + 86</span>
                </div>{" "} */}
                    <input
                      value={registerName}
                      className={styles.phoneInput}
                      type="text"
                      placeholder="请输入8到14个字符的昵称~"
                      onChange={(e) => {
                        dispatch(
                          userSlice.actions.changeRegisterName(e.target.value)
                        );
                      }}
                    />
                  </div>
                </>
              )}

              <div className={styles.inputBottom}>
                {" "}
                <IconFont className={styles.iconsuo} type="icon-suo" />
                <input
                  value={psd}
                  className={styles.psdInput}
                  type="password"
                  placeholder="请输入密码"
                  onChange={(e) => {
                    dispatch(userSlice.actions.changePsd(e.target.value));
                  }}
                />
                {type === "login" ? (
                  <div className={styles.psdRe}>重置密码</div>
                ) : null}
                {/* <div>
                  {" "}
                  <IconFont type="icon-shouji" />
                </div>{" "}
                <div></div> */}
              </div>
            </div>
          </div>
          <div className={styles.loginBtnBox}>
            {type === "login" ? (
              <div onClick={login} className={styles.loginBtn}>
                登录
              </div>
            ) : (
              <div onClick={registerOK} className={styles.loginBtn}>
                注册
              </div>
            )}
          </div>{" "}
          <div className={styles.register}>
            {type === "login" ? (
              <div
                className={styles.registerContent}
                onClick={() => {
                  dispatch(userSlice.actions.changeType("registered"));
                }}
              >
                注册
              </div>
            ) : null}
          </div>{" "}
          <div className={styles.allow}>
            <div className={styles.allowitems}>
              <Checkbox onChange={onChange}>
                <a
                  className={styles.checkBox}
                  href="https://st.music.163.com/official-terms/service"
                  target="_blank"
                  rel="noreferrer"
                >
                  《服务条款》
                </a>{" "}
                <a
                  href="https://st.music.163.com/official-terms/privacy"
                  target="_blank"
                  rel="noreferrer"
                >
                  《隐私政策》
                </a>{" "}
                <a
                  href="https://st.music.163.com/official-terms/children"
                  target="_blank"
                  rel="noreferrer"
                >
                  《儿童隐私政策》
                </a>
              </Checkbox>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Login;
